<template>
    <div>
        <input 
            v-model="newToDo"
            placeholder='add a to do'
            @keyup.enter = 'addNewTodo'
        >
         <ul>
            <li is="todo-item"  v-for="(todo,index) in todos" :key='todo.id' :title="todo.title" @remove="todos.splice(index,1)"> 
            </li>
        </ul>
    </div>
</template>

<script>
var todoItem = {
    template:
        '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\
    ',
    props:['title']
}
    export default {
        components:{'todo-item':todoItem},
        data (){
            return {
                newToDo:"",
                todos:[
                    {
                        title:'遛狗',
                        id:1
                    },
                    {
                        title:'练习吉他',
                        id:2
                    },
                    {
                        title:'学习vue',
                        id:3
                    },
                    {
                        title:'看权力的游戏',
                        id:4
                    }
                ],
                nextTodoId:4
            }
        },
        methods:{
            addNewTodo: function(){
                this.todos.push({
                    id:this.nextTodoId++,
                    title:this.newToDo
                });
                this.newToDo=''
                console.log(this.todos)
            }
        }
    }
</script>

<style scoped>

</style>